<template>
  <!-- 中国地图 -->
  <div class="map-ball"></div>
  <div class="echarts" id="mapChart"></div>
</template>

<script setup lang="ts">
import { ECharts, EChartsOption, init } from "echarts";
import echarts from "@/utils/echarts";
import mapJson from "../assets/china.json";

let planePath: string =
  "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
const initChart = (data: any = []): ECharts => {
  const charEle = document.getElementById("mapChart") as HTMLElement;
  const charEch: ECharts = init(charEle);
  echarts.registerMap("china", mapJson as any);
  const option: EChartsOption = {
    // 悬浮窗
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(0, 0, 0)", // 提示框浮层的背景颜色。
      borderColor: "#333",
      axisPointer: {
        // 坐标轴指示器配置项。
        type: "shadow", // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
        axis: "auto", // 指示器的坐标轴。
        snap: true // 坐标轴指示器是否自动吸附到点上
      },
      textStyle: {
        // 提示框浮层的文本样式。
        color: "#41feff",
        fontStyle: "normal",
        fontWeight: "normal",
        fontFamily: "sans-serif",
        fontSize: 14
      },
      padding: 5, // 提示框浮层内边距，
      formatter: function (params: any) {
        return `<div style='width:300px;height:220px'>
                    <p style="text-indent: 10px;width:100%;height:30px;line-height: 30px;border-bottom:1px solid #70ccef">所在省份:${
                      params.name
                    }</p>
                    <p style="line-height: 30px; text-indent: 10px;">补助人数:${1}人</p>
                    <p style="line-height: 30px; text-indent: 10px;">补助金额:${1}万元</p>
                    <p style="line-height: 30px; text-indent: 10px;" >支出比例:${1}%</p>
                    <p style="line-height: 30px; text-indent: 10px;">补助发生率:${1}%</p>
              </div>`;
        // return `${params.name}: ${params.value || "-"}`;
      }
    },
    // echarts大小位置
    grid: {
      left: "0px",
      right: "80px",
      top: "10px",
      bottom: "10px"
    },
    geo: {
      map: "china",
      zoom: 1.5,
      center: [102.848234, 32.82333],
      scaleLimit: {
        min: 0.8
      },
      label: {
        color: "#fff",
        show: true
      },
      emphasis: {
        label: {
          color: "#fff",
          show: true
        },
        itemStyle: {
          areaColor: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#073684" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#2B91B7" // 100% 处的颜色
              }
            ]
          }
        }
      },
      roam: false,
      itemStyle: {
        areaColor: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#073684" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#061E3D" // 100% 处的颜色
            }
          ]
        },
        borderColor: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "#00F6FF"
            },
            {
              offset: 1,
              color: "#87ADCB"
            }
          ],
          false
        ),
        shadowColor: "rgba(10,76,139,1)",
        shadowOffsetY: 0,
        shadowBlur: 60,
        borderWidth: 1
      }
    },
    series: [
      {
        name: "",
        type: "map",
        roam: true, //是否开启鼠标缩放和平移漫游
        geoIndex: 0 // 不可缺少，否则无tooltip 指示效果
      }
    ]
  };
  charEch.setOption(option);
  return charEch;
};
defineExpose({
  initChart
});
</script>
<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
.map-ball {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 900px;
  height: 900px;
  transform: translate(-50%, -50%);
  img {
    width: 500px;
    height: 500px;
  }
}
</style>
